<template>
  <div>
    <nav-bar title="绑定手机"/>
    <div class="content_scroll content-box">
      <div class="content-phone content">
        <span class="title-name">手机号</span>
        <input type="number" placeholder="请输入您的手机号码" v-model="mobile">
      </div>
      <div class="content-code content">
        <span class="title-name">验证码</span>
        <input type="number" placeholder="请输入验证码" v-model="code">
        <div class="code" :disabled="codeDisabled" @click="getCode">{{codeMsg}}</div>
      </div>
      <div class="submit" @click="submitClick">提交</div>
    </div>
  </div>
</template>

<script>
// import {getPost} from '../../../../network/post'
import {Toast} from 'vant'
import NavBar from '../../../../components/common/navbar/NavBar.vue'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      codeMsg: "获取验证码",
      mobile: '',
      code: '',
      // 是否禁用按钮
      codeDisabled: false,
      // 倒计时秒数
      countdown: 60,
      // 定时器
      timer: null,
    }
  },
  methods: {
    //提交
    submitClick() {
      var url = '/user_bound_mobile'
      var data = {
        'mobile': this.mobile,
        'code': this.code,
        'type': 1,
        'is_ajax': 1,
      }
      if (!this.isPhoneNum(this.mobile)) return Toast("请输入正确的电话号码")
      if (!this.isTestCode(this.code)) return Toast("请输入正确的验证码")
      getPost(url, data).then(res => {
        if(res.status == 'ok') {
          this.$router.push('/userinfo')
        }else{
          Toast(res.info)
        }
      })
    },
    // 获取验证码
    getCode() {
      var url = "/user_get_code";
      var data = { mobile: this.mobile };
      // 验证电话号码输入是否正确
      if (!this.isPhoneNum(this.mobile)) return Toast("请输入正确的电话号码");
      getPost(url, data).then(res => {
        if (res.status == "ok") {
          // 验证码60秒倒计时
          if (!this.timer) {
            this.timer = setInterval(() => {
              if (this.countdown > 0 && this.countdown <= 60) {
                this.countdown--;
                if (this.countdown !== 0) {
                  this.codeMsg = "重新发送(" + this.countdown + ")";
                } else {
                  clearInterval(this.timer);
                  this.codeMsg = "获取验证码";
                  this.countdown = 60;
                  this.timer = null;
                  this.codeDisabled = false;
                }
              }
            }, 1000);
          }
        } else {
          Toast(res.info);
        }
      });
    },
    // 验证是否为手机号
    isPhoneNum(str) {
      return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(
        str
      )
    },
    // 验证是否验证码
    isTestCode(str) {
      return /^\d{6}$/.test(str)
    }

  }
}
</script>

<style scoped>
.content-box {
  box-sizing: border-box;
  width: 10rem;
  height: auto;
  padding: .533333rem .933333rem 0;
  background: #ffffff;
}

.content {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 .4rem;
  width: 8.133333rem;
  height: 1.173333rem;
  background: #f2f2f2;
  border-radius: .133333rem;
}

.content-code {
  margin-top: .266667rem;
}

.title-name {
  font-size: .373333rem;
  color: #222222;
}

.content input {
  outline: none;
  width: 3.866667rem;
  height: .933333rem;
  border: 0;
  text-indent: .266667rem;
  font-size: .32rem;
  background: #f2f2f2;
}

.content-code .code {
  position: relative;
  width: 2rem;
  font-size: .32rem;
  color: #ff5543;
  text-align: right;
}

.content-code .code::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%,-50%);
  width: .013333rem;
  height: .533333rem;
  background: #999999;
}

.submit {
  margin-top: .8rem;
  width: 8.133333rem;
  height: 1.173333rem;
  opacity: 1;
  background: #ff5543;
  border-radius: .133333rem;
  font-size: .373333rem;
  text-align: center;
  color: #ffffff;
  line-height: 1.173333rem;
}
</style>
